<template>
    <div class="container">
      <div class="leftMain">
        <my-index-maxshow slot="maxShow" :max-show="maxShow"></my-index-maxshow>
        <div class="divider">
          <el-divider>
            <font style="font-family: ‘Microsoft YaHei‘;
          font-size: 20px;">最新内容</font>
          </el-divider>
        </div>
        <my-index-newshow :blogs="this.blogs"></my-index-newshow>
        <p style="text-align: center;" v-if="loading"><i style="font-size: 30px;" class="el-icon-loading"></i></p>
        <p style="text-align: center;" v-if="noMore">没有更多了</p>
      </div>
      <div class="rightMain">
        <my-index-usershow :usershow="this.usershow" ></my-index-usershow>
        <div class="divider">
          <el-divider>
            <font style="font-family: ‘Microsoft YaHei‘;
          font-size: 20px;">热门文章</font>
          </el-divider>
        </div>
        <my-index-hot-blogs :hot-blogs="this.hotBlogs" ></my-index-hot-blogs>
        <my-contact class="update-log" ></my-contact>
        <comment :blog-id="this.blogId" :showSizes="false"></comment>
    </div>
    </div>
</template>

<script>
import myIndexMaxshow from "./components/content/main/myIndexMaxshow";
import myIndexNewshow from "./components/content/main/myIndexNewshow";
import myIndexHotBlogs from "./components/content/main/myIndexHotBlogs";
import MyIndexUsershow from "./components/content/main/myIndexUsershow";
import myContact from "./components/content/contact/myContact";
import { dataFromIndex,listBlogFromIndex} from "@/api/blog/blog";
import comment from "../components/comment";
//获得博客配置
import {listConfigByType } from "@/api/blog/config";
import {getMaxAndUserConfig} from "./utils/getBlogConfig";


export default {
  name: "index",
  components: {
    myIndexMaxshow,myIndexNewshow,MyIndexUsershow,myIndexHotBlogs,myContact,comment
  },
  mounted(){
    //添加滚动事件，检测滚动到页面底部
    window.addEventListener('scroll', this.scrollBottom)
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderBy: 'update_time desc',
      },
      categoryList: [],
      blogs: [],
      hotBlogs: [],
      maxShow: null,
      usershow: null,
      loading: false,
      noMore: false,
      blogId: 0,
    }
  },
  created() {
     this.getForm();
  },
  methods: {
    getForm(){
      listConfigByType(1).then(response =>{
        var res = getMaxAndUserConfig(response.rows);
        this.maxShow = res.maxShow;
        this.usershow = res.usershow;
      });

      this.queryParams.orderBy = 'update_time desc ';
      dataFromIndex(this.queryParams).then(response =>{
        this.categoryList = response.data.categoryList;
        this.hotBlogs = [];
        for(let i = 0; i < response.data.hotBlog.length; i++){
          this.hotBlogs.push({blogId: response.data.hotBlog[i].blogId,img : response.data.hotBlog[i].coverImgUrl,title : response.data.hotBlog[i].title});
        }

        this.blogs = [];
        for(let i = 0; i < response.data.newBlog.length; i++){
          this.blogs.push({
            blogId: response.data.newBlog[i].blogId,
            img: response.data.newBlog[i].coverImgUrl,
            title: response.data.newBlog[i].title,
            time: response.data.newBlog[i].updateTime,
            category: this.getCategoryNameById(response.data.newBlog[i].categoryId),
            categoryId: response.data.newBlog[i].categoryId,
            contail: response.data.newBlog[i].introduction,
            likeCount: response.data.newBlog[i].likeCount
          });
        }
        if(this.blogs.length < 10) this.noMore = true;
      });
    },
    getCategoryNameById(categoryId) {
      for(let i = 0; i < this.categoryList.length; i++){
        if(this.categoryList[i].categoryId === categoryId){ return this.categoryList[i].text}
      }
      return "";
    },
    // 滚动到页面底部时，请求内容
    scrollBottom() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      let bottomOfWindow = scrollTop + clientHeight >= scrollHeight-4;
      if (scrollTop!=0 && bottomOfWindow && !this.loading && !this.noMore) {
        this.loading = true;
        if(this.queryParams.pageSize === 10){
          this.queryParams.pageSize = 5;
          this.queryParams.pageNum = this.queryParams.pageNum*2 + 1;
        }else{
          this.queryParams.pageNum = this.queryParams.pageNum + 1;
        }
        listBlogFromIndex(this.queryParams).then(response =>{
          if(response.code == 200) {
            if (response.data.blogList.length < 5) {
              this.noMore = true;
            }
            for (let i = 0; i < response.data.blogList.length; i++) {
              this.blogs.push({
                blogId: response.data.blogList[i].blogId,
                img: response.data.blogList[i].coverImgUrl,
                title: response.data.blogList[i].title,
                time: response.data.blogList[i].updateTime,
                category: this.getCategoryNameById(response.data.blogList[i].categoryId),
                categoryId: response.data.blogList[i].categoryId,
                contail: response.data.blogList[i].introduction,
                likeCount: response.data.blogList[i].likeCount
              });
            }
            this.loading = false;
          }else{
            this.$modal.msgError(response.msg);
          }
        });
      }
    }
  }
}
</script>

<style scoped>
.container{
  flex-direction: row;
  align-items: center;
  height: auto;
  width: 100%;
  margin-top: 10px;
}
.leftMain{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 70%;
  float: left;
}

.rightMain{
  flex-direction: column;
  float: right;
  height: 100%;
  width: 30%;
}
.divider{
  margin: 5px 5px 5px 5px;
  width: 100%;
  height: 20px;
}
.update-log{
  width: 100%;
  margin: 15px 10px 5px 10px;
}
</style>
